import React, {useEffect, useState} from 'react';
import {Button, Descriptions, Badge, Space,Card} from "antd";
import {useLocation, useNavigate,useParams} from "react-router-dom";
import {getHospitalShowById} from "@/api/hosp";
import {useAppDispatch} from "@/hooks";
import {delItemsByIndex, upItems, useSelectorCommon} from "@/store/slices/common";

function Index() {
    const {id} = useParams();
    const dispatch = useAppDispatch();
    const {pathname} = useLocation();
    const {items} = useSelectorCommon();
    const navigate = useNavigate();

    const [info,setInfo] = useState<any>({
        hospital:{
            param:{}
        },
        bookingRule:{
            rule:[]
        }
    });
    useEffect(()=>{
        getHospitalShowById(id as string).then(value=>{
            console.log(value);
            setInfo(value.data);
            dispatch(upItems({
                key:pathname,
                label:value.data.hospital.hosname+"详情"
            }))
        })
    },[])
    return (
        <div id={"content"}>
            <Space direction={"vertical"}>
                <Button onClick={()=>{
                    const index = items.findIndex((v:any)=>v.key===pathname);
                    dispatch(delItemsByIndex(index));
                    // navigate(items[index-1].key);// 返回的是左侧的标签页
                    navigate("/hospital/hospitalList")
                }} danger type={"primary"}>关闭返回</Button>

                <Card>
                    <Descriptions column={2} title="医院基本信息" bordered>
                        <Descriptions.Item label="医院名称">{info.hospital.hosname}</Descriptions.Item>
                        <Descriptions.Item label="医院LOGO">
                            {
                                info.hospital.logoData && <img height={100} src={"data:image/png;base64,"+info.hospital.logoData} alt=""/>
                            }
                        </Descriptions.Item>
                        <Descriptions.Item label="医院编码">{info.hospital.hoscode}</Descriptions.Item>
                        <Descriptions.Item label="医院地址">{info.hospital.param.fullAddress}</Descriptions.Item>
                        <Descriptions.Item label="乘车路线" span={2}>
                            {info.hospital.route}
                        </Descriptions.Item>
                        <Descriptions.Item label="医院简介" span={2}>
                            {info.hospital.intro}
                        </Descriptions.Item>
                    </Descriptions>
                </Card>


                <Card>
                    <Descriptions column={2} title="医院预约规则信息" bordered>
                        <Descriptions.Item label="预约周期">{info.bookingRule.cycle}</Descriptions.Item>
                        <Descriptions.Item label="放号时间">{info.bookingRule.releaseTime}</Descriptions.Item>
                        <Descriptions.Item label="停号时间">{info.bookingRule.stopTime}</Descriptions.Item>
                        <Descriptions.Item label="退号时间">{info.bookingRule.quitTime}</Descriptions.Item>
                        <Descriptions.Item label="预约规则" span={2}>
                            {info.bookingRule.rule.map((v:string,index:number)=>(
                                <p key={index}>{v}</p>
                            ))}
                        </Descriptions.Item>
                    </Descriptions>
                </Card>

            </Space>

        </div>
    );
}

export default Index;